<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>维修保养</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <style>
        html,body,.app{
            background: #fff;
        }
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            border-radius: .05rem;
            padding: .1rem .08rem;
        }
        .swiper-slide{
            width: 3.5rem;
            height: 2.64rem;
            margin: 0;
            padding: 0;
        }
        .swiper-slide img,.swiper-slide video{
            width: 3.5rem;
            height: 2.64rem;
            border-radius: 0.05rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="bgf iphonex-padding-bottom">
            <table></table>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide flex-x-c" v-for="(item,index) in detailMaintenance.banners" :key="index">
                        <img v-lazy="item.imageUrl" alt="" v-if="!item.playURL" @click="preview(index,detailMaintenance.banners)">
                        <div class="videoPlay main-img" v-else>
                            <video  :id="'player'+index" controls preload="none"
                                webkit-playsinline="true" playsinline="true" :poster="item.imageUrl" x5-playsinline>
                                <source :src="item.playURL" type="video/mp4" />
                            </video>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="ccwl-detail">
                <div class="title">{{detailMaintenance.shopName}}</div>
                <div class="label flex-x-s flex-wrap">
                    <div>{{detailMaintenance.publisherType==0?'自营':detailMaintenance.publisherType==1?'个人':'商家'}}</div>
                </div>
                <div class="area flex-x-sb" @click="goMap">
                    <span>{{detailMaintenance.address}}</span>
                    <span class="iconfont">&#xe666;</span>
                </div>
                <div class="line"></div>
                <div v-if="true">
                    <div class="ccwl-wx-label">
                        <div class="content flex-x-s-s" style="margin-bottom: .1rem;">
                            <div class="title" style="margin: 0;">店铺类型</div>
                            <div class="label flex-x-s flex-wrap">
                                <div v-for="(item,index) in detailMaintenance.types" :key="index">
                                    {{item.id === '0' ? '配件商' : (item.id === '1' ? '维修点' : '整机商')}}</div>
                            </div>
                        </div>
                        <div class="content flex-x-s-s" style="margin-bottom: .1rem;">
                            <div class="title" style="margin: 0;">服务类型</div>
                            <div class="label flex-x-s flex-wrap">
                                <div v-for="(item,index) in detailMaintenance.tags" :key="index"  @click="goTagDetail(item)">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="ccwl-hw-detail">
                        <div class="hwt">简介</div>
                        <pre class="hwc">{{detailMaintenance.intro}}</pre>
                    </div>
                </div>
            </div>
        </div>
        <script src="../../script/api.js"></script>
        <script src="../../script/flexible.js"></script>
        <script src="../../script/fastclick.js"></script>
        <script src="../../script/vue.min.js"></script>
        <script src="../../script/iconfont.js"></script>
        <script src="../../script/vant.min.js"></script>
        <script src="../../script/swiper.min.js"></script>
        <script src="../../script/businessCommon.js"></script>
        <script src="../../script/common.js"></script>
        <script src="../../script/restful.js"></script>
        <script src="../../script/vue-lazyload.js"></script>
        <script>
            apiready = function () {
                imgLazyLoad();
                var photoBrowser = api.require('photoBrowser');
                var vm = new Vue({
                    el: '.app',
                    data: {
                        id: api.pageParam.id,
                        title: api.pageParam.title,
                        detailMaintenance: {},
                    },
                    mounted() {
                        this.getData()
                    },
                    methods: {
                        preview(index,medias){
                            previewPhoto(index,medias,photoBrowser)
                        },
                        goTagDetail(item){
                            api.openWin({
                                name: 'tag_win',
                                url: '../common/tag_win.html',
                                bounces: false,
                                pageParam: {item : item}
                            });
                        },
                        initSwipe() {
                            this.$nextTick(() => {
                                new Swiper('.swiper-container', {
                                    pagination: '.swiper-pagination',
                                    // autoplay: 3000,
                                    onTouchStart: function (swiper, even) {
                                        api.setFrameAttr({
                                            name: 'goods_detail_frm',
                                            bounces: false
                                        });
                                    },
                                    onTouchEnd: function (swiper) {
                                        api.setFrameAttr({
                                            name: 'goods_detail_frm',
                                            bounces: true
                                        });
                                    },
                                    onSliderMove: function (swiper, event) {
                                        var curDom = document.querySelector('#player' +
                                            swiper.activeIndex)
                                        if (curDom) curDom.pause()
                                    },
                                })
                            })
                        },
                        goMap() {
                            var location = {
                                lon: this.detailMaintenance.location.split(',')[0],
                                lat: this.detailMaintenance.location.split(',')[1]
                            }
                            openMap(location, this.detailMaintenance.address)
                        },
                        getData() {
                            var vm = this;
                            index.maintenance('getDetailMaintenance')(vm.id, function (ret) {
                                vm.detailMaintenance = ret.data
                                vm.detailMaintenance.banners.map(item => {
                                    if (item.videoId) {
                                        common("getVideoPlay")(item.videoId, function (
                                        ret) {
                                            var videoId = ret.data.videoBase.videoId
                                            var index = vm.detailMaintenance.banners
                                                .findIndex(target => {
                                                    return target.videoId == videoId
                                                })
                                            vm.$set(vm.detailMaintenance.banners[
                                                    index], 'playURL', ret.data
                                                .playInfoList[0].playURL)
                                        })
                                    }
                                })
                                vm.initSwipe();
                            })
                        },
                        call() {
                            var phone = this.detailMaintenance.phone.split(',')
                            api.actionSheet({
                                cancelTitle: '取消',
                                buttons: phone
                            }, function (ret, err) {
                                if (ret.buttonIndex > phone.length) return false;
                                api.call({
                                    type: 'call_type',
                                    number: phone[ret.buttonIndex - 1]
                                });
                            });
                        },
                        backPage() {
                            api.closeWin();
                        },
                    },
                })
                api.addEventListener({
                    name: 'sendMaintenance'
                }, function (ret, err) {
                    var type = ret.value.type
                    if (type == 'call') {
                        if (!checkToken()) return false;
                        vm.call()
                    } else if (type == 'goIM') {
                        gIMCommon(vm.detailMaintenance.userId)
                    }
                });
            }
        </script>
</body>

</html>